<template>
  <div class="select">
    <div class="select-container">
      <div class="select-title">选择学校</div>
      <div class="sidebar-bg">
        <div class="up-bg"></div>
        <div class="down-bg"></div>
        <scroll-container ref="scrollContainer" :listenShowNav="false">
          <multi-list
            @scrollTo="scrollTo"
            :groupDatas="gradeList"
            :groupOffset="101"
          >
            <ul>
              <li
                v-for="(grade,index) in gradeList.dataArr[0].data"
                :class="{active: gradeList.focArr[0][index],'holdActive':grade.id == $store.state.school.id}"
                :key="index"
              >
                {{grade.name}}
                <span :data-index="'tar_101_'+index"></span>
                <!-- <router-link to="lesson">{{grade}}</router-link> -->
              </li>
            </ul>
          </multi-list>
        </scroll-container>
      </div>
    </div>
  </div>
</template>
<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "select-school",
    components: {
      scrollContainer,
      multiList
    },
    mixins: [mixinCommon],
    data() {
      return {
        groups: [0, 1],
        scrollY: 0,
        school: {},
        gradeList: {
          dataArr: [
            {
              maxLine: 1,
              dynamic: false,
              data: []
            }
          ],
          focArr: [[]]
        }
      };
    },
    methods: {
      getList() {
        this.hs.ajax.get(
          "http://" + this.$store.state.domain + "/SMSCH-STB/school/list",
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.gradeList.dataArr[0].data = data.body;
            }
          },
          0,
          function (msg) {
          },
          3000
        );
      },
      getSchool(index) {
        // 获取学校信息
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/school/find?schoolId=" +
          this.gradeList.dataArr[0].data[index].id + '&r=' + Math.random(),
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.school = data.body;
            }
          },
          0,
          function (msg) {
          },
          3000
        );

        // 添加到服务器
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/stb/change-sch?stbid=" + this.bridge.stbid + "&schoolId=" + this.school.id + '&r=' + Math.random(),
          data => {
            data = JSON.parse(data);
            //console.log(data);
          },
          0,
          function (msg) {
          },
          3000
        );
      }
    },
    created() {
      this.getList();
    },
    mounted() {
      this.hs.addSelect([101], (group, objid, objindex) => {
        this.getSchool(objindex);
        this.wasuLog('/qhxx/' + objindex, this.school.name)
        this.$store.commit("setSchool", this.school);
        this.$emit("SelectedSchool", this.school);
      });
    }
  };
</script>

<style scoped lang="less">
  .select {
    padding-top: 232px;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    display: flex;
    justify-content: center;
    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }
    .select-container {
      box-sizing: border-box;
      flex-shrink: 0;
      width: 736px;
      height: 609px;
      border-radius: 8px;
      overflow: hidden;
      .select-title {
        background: #3078a9;
        color: #53cfff;
        height: 75px;
        line-height: 75px;
        text-align: center;
        font-size: 36px;
      }
      .sidebar-bg {
        position: relative;
        height: 532px;
        background: #6ec6e8;
        .up-bg {
          z-index: 99;
          position: absolute;
          top: 0;
          background: url("../../assets/images/xyfc/select-up.png") center no-repeat;
          width: 100%;
          height: 81px;
        }
        .down-bg {
          z-index: 99;
          position: absolute;
          bottom: 0;
          background: url("../../assets/images/xyfc/select-down.png") center no-repeat;
          width: 100%;
          height: 81px;
        }
        .multi-container {
          padding-top: 90px;
          padding-bottom: 90px;
          ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding-top: 2px;
            li {
              text-align: center;
              margin-bottom: 26px;
              padding: 0;
              list-style: none;
              display: block;
              width: 572px;
              height: 81px;
              line-height: 81px;
              border-radius: 40px;
              // background: #6ec6e8;
              color: #104572;
              font-size: 42px;
              position: relative;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              span {
                position: absolute;
                bottom: -20px;
              }
            }
            .holdActive {
              color: #fbff92;
              background-color: #09508a;
            }
            .active {
              color: #ffffff;
              background: #0e60e9;
              transform: scale(1.1);
              border: 2px solid #fff;
            }
          }
        }
      }
    }
  }
</style>
